<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>学生管理系统</title>
	<!-- 使用bootstrap，需要引入样式文件 -->
	<link rel="stylesheet" href="/assets/lib/boostrap/css/bootstrap.css">
	<style>
		.navbar {
			border-radius: 0px;
		}

		.table td,
		.table th {
			text-align: center;
			vertical-align: middle !important;
		}

		.mask {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			/* background: url('./images/1.gif') no-repeat center center; */
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 999;
			display: none;
		}

		@keyframes rotate {
			from {
				transform: translate(-50%, -50%) rotate(0deg);
			}

			to {
				transform: translate(-50%, -50%) rotate(360deg);
			}
		}

		.mask .rotate {
			border: 3px solid blue;
			width: 100px;
			height: 100px;
			animation: rotate 1s infinite;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	</style>
</head>

<body>
	<!-- 导航条 -->
	<nav class="navbar navbar-inverse">
		<div class="container">
			<div class="navbar-header">
				<a class="navbar-brand" href="#">57期学生管理系统</a>
			</div>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">Copyright © 2019</a></li>
			</ul>
		</div>
		</div>
	</nav>


	<!-- 面板 -->
	<div class="container">
		<div class="panel panel-success">
			<div class="panel-heading clearfix">
				<h4 class="pull-left">学生基本信息管理</h4>
				<button class="btn btn-primary pull-right btn-add">添加学生信息</button>
			</div>
			<div class="panel-body">
				<table class="table table-striped table-bordered">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>性别</th>
							<th>年龄</th>
							<th>所属学院</th>
							<th>个人简介</th>
							<th>家庭住址</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>tom</td>
							<td>男</td>
							<td>18</td>
							<td>前端学院</td>
							<td>一个美男子</td>
							<td>上海市浦东新区</td>
							<td>
								<button class="btn btn-success">修改</button>
								<button class="btn btn-danger">删除</button>
							</td>
						</tr>
						<tr>
							<td>2</td>
							<td>rose</td>
							<td>女</td>
							<td>19</td>
							<td>UI学院</td>
							<td>一个大美女</td>
							<td>上海市奉贤区</td>
							<td>
								<button class="btn btn-success">修改</button>
								<button class="btn btn-danger">删除</button>
							</td>
						</tr>
						<tr>
							<td>3</td>
							<td>jerry</td>
							<td>男</td>
							<td>22</td>
							<td>python学院</td>
							<td>一个骨灰级程序员</td>
							<td>上海市汤臣一品</td>
							<td>
								<button class="btn btn-success">修改</button>
								<button class="btn btn-danger">删除</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<!-- 删除用户的模态框 -->
	<div class="modal fade delModal" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">删除学生</h4>
				</div>
				<div class="modal-body">
					<p class="text-danger">你确定要删除该学生吗?</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary btn-sure-delete">确定</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<!-- 添加或修改用户的模态框 -->
	<div class="modal fade addModal" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-md" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
					<h4 class="modal-title add-modal-title">添加学生信息</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group hidden">
							<input type="text" class="form-control" name="id">
						</div>
						<div class="form-group">
							<input type="text" class="form-control" name="name" placeholder="请输入学生的姓名">
						</div>
						<div class="form-group">
							<select class="form-control" name="gender">
								<option value="男">男</option>
								<option value="女">女</option>
							</select>
						</div>
						<div class="form-group">
							<input type="text" class="form-control" name="age" placeholder="请输入您的年龄">
						</div>
						<div class="form-group">
							<input type="text" class="form-control" name="zhuanye" placeholder="请输入所属学院">
						</div>
						<div class="form-group">
							<input type="text" class="form-control" name="address" placeholder="请输入住址">
						</div>
						<div class="form-group">
							<textarea class="form-control" rows="3" name="bio" placeholder="请输入个人介绍"></textarea>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary btn-sure-edit">确定</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<!-- 1. 引入js -->
	<script src="/assets/lib/art-template/template-web.js"></script>
	<script src="/assets/js/jquery-1.12.2.js"></script>
	<script src="/assets/lib/boostrap/js/bootstrap.js"></script>
	<!-- 准备模板 -->
	<script type="text/template">
	{{each data as item index}}
	<tr>
		<td>{{index+1}}</td>
		<td>{{item.name}}</td>
		<td>{{item.gender}}</td>
		<td>{{item.age}}</td>
		<td>{{item.zhuanye}}</td>
		<td>{{item.bio}}</td>
		<td>{{item.address}}</td>
		<td>
			<button class="btn btn-success">修改</button>
			<button class="btn btn-danger">删除</button>
		</td>
	</tr>
	{{/each}}	
	</script>		
<script>
// 1. 渲染页面中的数据   查

// 2. 添加学生

// 3. 删除学生

// 4. 更新学生数据
</script>
	
</body>

</html>